// React 组件实例在渲染的时候创建。这些实例在接下来的渲染中被重复使用，可以在组件方法中通过 this 访问

/**
 * setState(function|object nextState[, function callback])
 * 把当前 state 和 nextState 进行一个浅复制. 若 nextState 是一个 function 则需要返回一个对象
 * 这是触发 UI 更新的主要方法. callback 在 setState执行完毕并且组件重新渲染完成后调用
 */
var Clock = React.createClass({
    getInitialState() {
        return {
            current: (new Date()).toLocaleString()
        };
    },
    componentDidMount() {
        setInterval(()=> {
            // 注意 因为使用的 箭头函数 所以此时的 this 指向的还是外层的 this
            this.setState({
                current: (new Date()).toLocaleString()
            }, ()=> {
                console.log('done setState and reRender');
            })
        }, 1000);
    },
    render() {
        return (
            <span>{this.state.current}</span>
        );
    }
});
ReactDOM.render(<Clock />, document.querySelector('#container1'));

/**
 * replaceState(object nextState[, function callback])
 * 类似于 setState()，但是删除之前所有已存在的 state 键，这些键都不在 nextState 中.
 * 注意: 在 ES6 class xx extend React.Component 写法中 此方法不可用. 在将来的 React 版本中有可能会删掉此方法
 */

/**
 * forceUpdate([function callback])
 * 手动渲染组件(重新执行 render 方法, 会跳过 shouldComponentUpdate 方法), 并且子组件也会重新渲染, 并且会执行 shouldComponentUpdate 方法
 */
var Child = React.createClass({
    shouldComponentUpdate() {
        console.log('Child shouldComponentUpdate');
        return true;
    },
    componentDidMount() {
        console.log('Child componentDidMount');
    },
    render() {
        return (
            <label>{this.props.name}</label>
        );
    }
});
var MyClock = React.createClass({
    shouldComponentUpdate() {
        console.log('MyClock shouldComponentUpdate');
        return true;
    },
    componentDidMount() {
        setInterval(()=> {
            this.currentTime = (new Date()).toLocaleString();
            this.forceUpdate(()=> {
                console.log('done forceUpdate');
            });
        }, 1000);
    },
    render() {
        this.currentTime = (new Date()).toLocaleString();
        return (
            <span>
                <Child name="现在时间: " />
                {this.currentTime}
            </span>
        );
    }
});
ReactDOM.render(<MyClock />, document.querySelector('#container2'));

/**
 * isMounted()
 * 组件渲染到 DOM 上则返回 true, 否则返回 false.
 * 可以使用该方法保证 setState() 和 forceUpdate() 在异步场景下的调用不会出错。
 * 注意: 在 ES6 class xx extend React.Component 写法中 此方法不可用. 在将来的 React 版本中有可能会删掉此方法
 */